<template>
  <el-main>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right" style="background-color: #E9EEF3;">
        <el-breadcrumb-item :to="{ path: '/Home/HomeMain' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/Home/QuestionList' }">问卷管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/Home/TestQuestion' }">试题管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-form :inline="true" style="line-height: normal;text-align: left">
      <el-form-item label="问卷标题" >
        <el-input size="small" v-model="searchValue"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="searchQuestion" icon="el-icon-search">搜索</el-button>
        <el-button size="small" @click="resetQuestion" style="color: red" icon="el-icon-close">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        height="480"
        border
        stripe
        style="width: 100%;line-height: normal">
      <el-table-column prop="questionImg" label="问卷图片" width="80" align="center">
        <template slot-scope="scope">
          <el-image style="width: 50px;height: 50px;border-radius: 50%"
                    :src="scope.row.questionImg"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="questionTitle" label="问卷标题" ></el-table-column>
      <el-table-column prop="questionDesc" label="问卷描述"></el-table-column>
      <el-table-column prop="questionOrder" label="问卷序号"></el-table-column>
      <el-table-column prop="questionStatus" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.questionStatus == '0'" type="danger" size="normal"
          >关闭</el-tag
          >
          <el-tag v-if="scope.row.questionStatus == '1'" type="success" size="normal"
          >调查中</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" type="primary" icon="el-icon-edit" @click="DesignQuestions(scope.row)">设计试题</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="line-height: normal;text-align: left">
    </el-pagination>

    <!--    设计试题对话框-->
    <el-dialog :title="dialogText" :visible.sync="dialogViewVisible"
               style="line-height: normal;" width="1000px">
<!--      <template slot="content">-->
        <el-container style="height: 100%">
          <el-aside width="100px"  >
            <div style="text-align: center">
            <el-button @click="addPaperData('1')" >单选题</el-button>
            <el-button @click="addPaperData('2')" >多选题</el-button>
            <el-button @click="addPaperData('3')" >单文本</el-button>
            <el-button @click="addPaperData('4')" >多文本</el-button>
            </div>
          </el-aside>
          <el-main style="padding-top: 1px">
            <el-form
                :model="designPaper"
                ref="customerForm"
                label-width="50px"
                :inline="false"
                size="small"
            >
              <div :key="index" v-for="index in designPaper.addModel.length">
                <!-- 单选、多选 -->
                <div v-if="designPaper.addModel[index - 1].paperType == '1' ||
                    designPaper.addModel[index - 1].paperType == '2'">
                  <!-- <el-row>：代表一行 ，里面的子元素会横向排列
                     <el-col ：代表的是列
                     :span 代表所占的分数，总分数是 24
                      -->
                  <el-row>
                    <el-col :span="17" :offset="0">
                      <el-form-item :label=" index + '、' "  label-width="30px" size="small">
                        <el-input
                            v-model="designPaper.addModel[index - 1].paperTitle"
                            size="small"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="7" :offset="0">
                      <el-button
                          style="margin-left: 15px"
                          size="small"
                          icon="el-icon-plus"
                          @click="addChoice(index)"
                      >新增选项</el-button
                      >
                      <el-button
                          style="margin-left: 15px"
                          type="danger"
                          size="small"
                          icon="el-icon-delete"
                          @click="deletePaper(index)"
                      >删除试题</el-button
                      >
                    </el-col>
                  </el-row>
                  <el-form-item
                      :key="num"
                      v-for="num in designPaper.addModel[index - 1].paperChoice.length"
                      label=""
                      size="small"
                  >
                    <el-row>
                      <el-col :span="10" :offset="0">
                        <el-form-item :label="'选项' + num" size="small">
                          <el-input
                              v-model="designPaper.addModel[index - 1].paperChoice[num - 1].choiceText"
                              size="small"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="10" :offset="0">
                        <el-form-item label="序号" size="small">
                          <el-input
                              v-model="designPaper.addModel[index - 1].paperChoice[num - 1].choiceOrder"
                              size="small"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="2" :offset="0">
                        <el-button
                            style="color: #ff7670; margin-left: 15px"
                            size="small"
                            circle
                            icon="el-icon-close"
                            @click="deleteChoice(index, num)"
                        ></el-button>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </div>
                <!-- 单文本 -->
                <div v-if="designPaper.addModel[index - 1].paperType == '3'">
                  <el-row>
                    <el-col :span="17" :offset="0">
                      <el-form-item :label="index + '、'" label-width="30px" size="small">
                        <el-input
                            v-model="designPaper.addModel[index - 1].paperTitle"
                            size="small"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col class="delBtn" :span="7" :offset="0">
                      <el-button
                          @click="deletePaper(index)"
                          style="margin-left: 15px"
                          type="danger"
                          icon="el-icon-delete"
                          size="small"
                      >删除试题</el-button
                      >
                    </el-col>
                  </el-row>
                </div>
                <!-- 多文本 -->
                <div v-if="designPaper.addModel[index - 1].paperType == '4'">
                  <el-row>
                    <el-col :span="17" :offset="0">
                      <el-form-item :label="index + '、'" label-width="30px" size="small">
                        <el-input
                            v-model="designPaper.addModel[index - 1].paperTitle"
                            type="textarea"
                            size="small"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col class="delBtn" :span="7" :offset="0">
                      <el-button
                          @click="deletePaper(index)"
                          style="margin-left: 15px"
                          type="danger"
                          icon="el-icon-delete"
                          size="small"
                      >删除试题</el-button>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-form>
            <div style="text-align: right">
              <el-button @click="sureInsert" type="primary">确定</el-button>
              <el-button @click="cancelInsert">取消</el-button>
            </div>
          </el-main>
        </el-container>
    </el-dialog>
  </el-main>

</template>

<script>
import axios from "axios";
import {tips} from "@/utils/tips";

export default {
  name: "TestQuestion",
  data(){
    return{
      searchValue:'',
      tableData:[],
      oldTableData:[],
      total:0,
      dialogViewVisible:false,
      currentPage:1,
      pageSize:10,
      dialogText:'',
      //试题绑定的数据域
      designPaper:{
        addModel:[],
      },
      // designPaper:[],
    }
  },
  methods:{
    //搜索
    searchQuestion(){
      let arr = this.oldTableData.filter( v =>{
        return v.questionTitle.indexOf(this.searchValue)!=-1;
      });
      console.log(arr);
      if(arr==null){
        tips(this,'失败','error','搜素失败');
        return;
      }
      this.tableData = arr;
      tips(this,'成功','success','搜素成功');
    },
    //重置搜索框
    resetQuestion(){
      if(this.searchValue!=''){
        this.searchValue = '';
        this.getQuestionList(this.currentPage,this.pageSize);
        tips(this,'成功','success','已重置搜索值');
      }else{
        tips(this,'警告','warning','未输入搜索值');
      }
    },
    //获取问卷列表
    getQuestionList(currentPage,pageSize){
      axios.get("http://localhost:8089/api/question/list",{
        params:{
          currentPage,
          pageSize
        }
      }).then(
          res => {
            console.log(res);
            console.log(res.data.data);
            this.total = res.data.data.total;
            this.tableData = res.data.data.records;
            this.oldTableData = this.tableData;
          },
          error => {
            console.log(error);
          }
      );
    },
    //设计试题
    DesignQuestions(row){
      this.dialogText = '为【 ' + row.questionTitle +' 】设计试题';
      this.dialogViewVisible = true;
      this.designPaper.addModel = [];
      this.questionId = row.questionId;
      axios.get("http://localhost:8089/api/syspaper/getPaperList",{
        params:{
          questionId: this.questionId
        }
      }).then(
          res => {
            console.log("试题");
            console.log(res);
            if (res && res.data.code == 200) {
              console.log(222)
              if (res.data.data && res.data.data.length > 0) {
                //设置返回的试题数据
                this.designPaper.addModel = res.data.data;
                console.log(this.designPaper.addModel);
              } else {
                this.addPaperData("1");
              }
            } else {
              this.addPaperData("1");
            }
          }
      )
    },
    //确定新增或修改
    sureInsert(){
      if(this.designPaper.addModel.length == 0){
          tips(this,"警告","warning","当前暂未设计试题");
          return;
      }
      axios.post("http://localhost:8089/api/syspaper/savePaper",this.designPaper.addModel).then(
          res => {
            console.log(res);
            tips(this,"成功","success","提交设计试题成功");
          },
          error => {
            console.log(error);
            tips(this,"失败","error","提交设计试题失败");
          }
      );
      this.dialogViewVisible = false;
    },
    //取消新增或修改
    cancelInsert(){
      this.dialogViewVisible = false;
      tips(this,"成功","success","已取消设计试题")
      this.designPaper.addModel = [];
    },
    // 删除试题选项
    deleteChoice(index, num) {
      this.designPaper.addModel[index - 1].paperChoice.splice(num - 1, 1);
    },
    //新增选择题的选项
    addChoice(index) {
      console.log(index);
      this.designPaper.addModel[index - 1].paperChoice.push({
        choiceText: "",
        choiceOrder: "",
      });
    },
    //删除试题
    deletePaper(index) {
      this.designPaper.addModel.splice(index - 1, 1);
    },
    //添加试题
    addPaperData(type) {
      //试题的数据格式，根据数据库字段所得
      let objModel = {
        paperId: "",
        questionId: "",
        paperTitle: "",
        paperType: "",
        paperOrder: "",
        //试题的选项
        paperChoice: [],
      };
      //如果是单选题或者多选题，需要设置选项
      if (type == "1" || type == "2") {
        let obj = {
          choiceText: "",
          choiceOrder: "",
        };
        objModel.paperChoice.push(obj);
      }
      //设置问卷id
      objModel.questionId = this.questionId;
      //设置试题的类型
      objModel.paperType = type;
      //设置到表单绑定的数据域
      this.designPaper.addModel.push(objModel);
    },
    //分页设置每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getQuestionList(this.currentPage,this.pageSize);
    },
    //分页设置当前页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getQuestionList(this.currentPage,this.pageSize);
    },
  },
  mounted() {
    this.getQuestionList(this.currentPage,this.pageSize);
  }
}
</script>

<style scoped>

</style>
